{% extends 'adminuser/base_admin.html' %}

{% block admin_title %}内容分析{% endblock %}

{% block extra_head %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
{% endblock %}

{% block admin_content %}
<div class="row">
    <div class="col-md-12">
        <div class="card mb-4">
            <div class="card-header bg-light d-flex justify-content-between align-items-center">
                <h5 class="mb-0">内容概览</h5>
                <div class="btn-group">
                    <a href="?range=week" class="btn btn-outline-primary {% if time_range == 'week' %}active{% endif %}">7天</a>
                    <a href="?range=month" class="btn btn-outline-primary {% if time_range == 'month' %}active{% endif %}">30天</a>
                    <a href="?range=year" class="btn btn-outline-primary {% if time_range == 'year' %}active{% endif %}">一年</a>
                </div>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-3">
                        <div class="card bg-primary text-white h-100">
                            <div class="card-body">
                                <h6 class="card-title text-white-50">总故事数</h6>
                                <h3 class="mb-0">{{ story_count|default:"0" }}</h3>
                                <p class="small mt-2 mb-0"><i class="bi bi-graph-up me-1"></i> 较上周增长 {{ story_growth|default:"0" }}%</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card bg-success text-white h-100">
                            <div class="card-body">
                                <h6 class="card-title text-white-50">平均阅读时长</h6>
                                <h3 class="mb-0">{{ avg_read_time|default:"4.5" }}分钟</h3>
                                <p class="small mt-2 mb-0"><i class="bi bi-graph-up me-1"></i> 较上周增长 {{ read_time_growth|default:"3.2" }}%</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card bg-info text-white h-100">
                            <div class="card-body">
                                <h6 class="card-title text-white-50">平均内容长度</h6>
                                <h3 class="mb-0">{{ avg_content_length|default:"850" }}字</h3>
                                <p class="small mt-2 mb-0"><i class="bi bi-graph-up me-1"></i> 较上周增长 {{ content_length_growth|default:"2.1" }}%</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card bg-warning text-white h-100">
                            <div class="card-body">
                                <h6 class="card-title text-white-50">平均互动率</h6>
                                <h3 class="mb-0">{{ avg_engagement_rate|default:"12.4" }}%</h3>
                                <p class="small mt-2 mb-0"><i class="bi bi-graph-up me-1"></i> 较上周增长 {{ engagement_growth|default:"5.3" }}%</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="mt-4">
                    <canvas id="storyTrendChart" height="100"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-6">
        <div class="card mb-4">
            <div class="card-header bg-light">
                <h5 class="mb-0">内容长度分布</h5>
            </div>
            <div class="card-body">
                <canvas id="contentLengthChart" height="300"></canvas>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card mb-4">
            <div class="card-header bg-light">
                <h5 class="mb-0">内容质量评分</h5>
            </div>
            <div class="card-body">
                <canvas id="contentQualityChart" height="300"></canvas>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-6">
        <div class="card mb-4">
            <div class="card-header bg-light">
                <h5 class="mb-0">热门话题/标签</h5>
            </div>
            <div class="card-body">
                <canvas id="topicsChart" height="300"></canvas>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card mb-4">
            <div class="card-header bg-light">
                <h5 class="mb-0">AI生成 vs 人工创作</h5>
            </div>
            <div class="card-body">
                <canvas id="contentTypeChart" height="300"></canvas>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <div class="card mb-4">
            <div class="card-header bg-light">
                <h5 class="mb-0">热门内容排行</h5>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>排名</th>
                                <th>标题</th>
                                <th>作者</th>
                                <th>分类</th>
                                <th>阅读量</th>
                                <th>点赞数</th>
                                <th>评论数</th>
                                <th>热度指数</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for story in popular_stories %}
                            <tr>
                                <td>{{ forloop.counter }}</td>
                                <td>{{ story.title }}</td>
                                <td>{{ story.author.username }}</td>
                                <td>{{ story.category.name }}</td>
                                <td>{{ story.views }}</td>
                                <td>{{ story.likes }}</td>
                                <td>{{ story.comment_count }}</td>
                                <td>{{ story.heat_score }}</td>
                            </tr>
                            {% empty %}
                            {% for i in "12345"|make_list %}
                            <tr>
                                <td>{{ forloop.counter }}</td>
                                <td>示例故事标题 {{ forloop.counter }}</td>
                                <td>用户{{ forloop.counter }}</td>
                                <td>分类{{ forloop.counter }}</td>
                                <td>{{ forloop.counter|add:"1000" }}</td>
                                <td>{{ forloop.counter|add:"200" }}</td>
                                <td>{{ forloop.counter|add:"50" }}</td>
                                <td>{{ forloop.counter|add:"8.5" }}</td>
                            </tr>
                            {% endfor %}
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 固定示例数据
    const dateLabels = ['07-01', '07-02', '07-03', '07-04', '07-05', '07-06', '07-07'];
    const storyData = [15, 20, 25, 18, 30, 22, 35];
    const viewsData = [580, 620, 750, 850, 920, 1050, 1200];
    const likesData = [120, 150, 180, 200, 230, 260, 300];
    
    // 内容长度分布数据
    const lengthLabels = ['1000字以下', '1000-3000字', '3000-5000字', '5000-10000字', '10000字以上'];
    const lengthData = [30, 40, 15, 10, 5];
    
    // 分类数据
    const categoryLabels = ['科幻', '悬疑', '奇幻', '历史', '爱情', '冒险', '青春'];
    const categoryData = [25, 18, 15, 12, 10, 8, 6];
    
    // AI vs 人工数据
    const contentTypeLabels = ['AI生成', '人工创作', '混合创作'];
    const contentTypeData = [65, 30, 5];

    // 故事发布趋势图表
    const storyTrendCtx = document.getElementById('storyTrendChart').getContext('2d');
    const storyTrendChart = new Chart(storyTrendCtx, {
        type: 'line',
        data: {
            labels: dateLabels,
            datasets: [
                {
                    label: '发布故事数',
                    backgroundColor: 'rgba(13, 110, 253, 0.2)',
                    borderColor: 'rgba(13, 110, 253, 1)',
                    borderWidth: 2,
                    data: storyData,
                    tension: 0.3
                },
                {
                    label: '阅读量',
                    backgroundColor: 'rgba(25, 135, 84, 0.2)',
                    borderColor: 'rgba(25, 135, 84, 1)',
                    borderWidth: 2,
                    data: viewsData,
                    tension: 0.3
                },
                {
                    label: '互动量',
                    backgroundColor: 'rgba(255, 193, 7, 0.2)',
                    borderColor: 'rgba(255, 193, 7, 1)',
                    borderWidth: 2,
                    data: likesData,
                    tension: 0.3
                }
            ]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'top'
                },
                title: {
                    display: true,
                    text: '内容发布与互动趋势'
                }
            },
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
    
    // 内容长度分布图表
    const contentLengthCtx = document.getElementById('contentLengthChart').getContext('2d');
    const contentLengthChart = new Chart(contentLengthCtx, {
        type: 'bar',
        data: {
            labels: lengthLabels,
            datasets: [{
                label: '故事数量',
                backgroundColor: 'rgba(13, 110, 253, 0.7)',
                data: lengthData
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    display: false
                },
                title: {
                    display: true,
                    text: '内容长度分布'
                }
            },
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
    
    // 内容质量评分图表
    const contentQualityCtx = document.getElementById('contentQualityChart').getContext('2d');
    const contentQualityChart = new Chart(contentQualityCtx, {
        type: 'bar',
        data: {
            labels: ['1分', '2分', '3分', '4分', '5分'],
            datasets: [{
                label: '故事数量',
                backgroundColor: [
                    'rgba(220, 53, 69, 0.7)',
                    'rgba(255, 193, 7, 0.7)',
                    'rgba(32, 201, 151, 0.7)',
                    'rgba(13, 110, 253, 0.7)',
                    'rgba(111, 66, 193, 0.7)'
                ],
                data: [15, 35, 120, 180, 280]
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    display: false
                },
                title: {
                    display: true,
                    text: '内容质量评分分布'
                }
            },
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
    
    // 热门话题/标签图表
    const topicsCtx = document.getElementById('topicsChart').getContext('2d');
    const topicsChart = new Chart(topicsCtx, {
        type: 'polarArea',
        data: {
            labels: categoryLabels,
            datasets: [{
                data: categoryData,
                backgroundColor: [
                    'rgba(13, 110, 253, 0.7)',
                    'rgba(111, 66, 193, 0.7)',
                    'rgba(32, 201, 151, 0.7)',
                    'rgba(255, 193, 7, 0.7)',
                    'rgba(220, 53, 69, 0.7)',
                    'rgba(108, 117, 125, 0.7)',
                    'rgba(25, 135, 84, 0.7)'
                ]
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'right'
                },
                title: {
                    display: true,
                    text: '热门话题分布'
                }
            }
        }
    });
    
    // AI生成 vs 人工创作图表
    const contentTypeCtx = document.getElementById('contentTypeChart').getContext('2d');
    const contentTypeChart = new Chart(contentTypeCtx, {
        type: 'pie',
        data: {
            labels: contentTypeLabels,
            datasets: [{
                data: contentTypeData,
                backgroundColor: [
                    'rgba(13, 110, 253, 0.7)',
                    'rgba(25, 135, 84, 0.7)',
                    'rgba(255, 193, 7, 0.7)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'bottom'
                },
                title: {
                    display: true,
                    text: '内容创作类型占比'
                }
            }
        }
    });
});
</script>
{% endblock %} 